<template>
  <div>

      <div id="chat" v-show="props.dialogVisible" style="z-index: ;">
        <div class="sidebar">
          <Card></Card>
          <list></list>
        </div>
        <div class="main">
          <p v-show="currentSessionId" style="height: 100%;">
            <Message></Message>
            <Usertext></Usertext>
          </p>
          <el-icon style="float:right;cursor: pointer;"><CloseBold /></el-icon>
        </div>
      </div>


  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance, onMounted,defineEmits ,computed} from 'vue';
import list from '@/components/chat/list.vue';
import Card from '@/components/chat/card.vue';
import Message from '@/components/chat/message.vue';
import Usertext from '@/components/chat/usertext.vue';
import { useStore } from "vuex";

const store = useStore()
let props = defineProps(['dialogVisible'])


const emit = defineEmits(['update:visible']);
let currentSessionId =  computed(()=>store.state.chat.currentSessionId.managerName) 
console.log('dfsfdfsdf',store.state.chat.currentSessionId)
function handleClose() {
  emit('update:visible',props.dialogVisible);
}


onMounted(()=>{
})
</script>
<style lang="less" scoped>
#chat {
  margin: 20px auto;
  width: 800px;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;

  position: absolute;
    top: 52px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;

  .sidebar,
  .main {
    height: 100%;
  }

  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: #2e3238;
    width: 200px;
  }

  .main {
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
}
</style>